<template>
    <view class="uni-select u-flex">
        <view v-for="(item,index) in selectData" :key="index"
            :style="{width: (100/selectData.length).toFixed(2)+'%', background:bgColor}"
            :class="['item','u-flex','u-row-between','u-p-l-30','u-p-r-30',item.show?'active-item':'']"
            @tap.stop="click(index)">
            <text :class="['u-font-28 u-line-1',item.show?'uni-inverse-color':'uni-main-color']">
                {{item.label}}
            </text>
            <u-icon 
                class="u-m-t-6"
                :name="item.show?'arrow-up-fill':'arrow-down-fill'" 
                :color="item.show?'#fff':'#5D6672'" size="12">
            </u-icon>

            <scroll-view scroll-y v-if="item.show" class="list">
                <view v-for="(tem,ind) in item.list" :key="ind"
                    :class="['tem','u-p-l-30','u-flex','u-p-r-30',tem.value==item.value?'active-item':'']"
                    @tap.stop="select(index,tem)">
                    <text :class="['u-font-28',tem.value==item.value?'uni-inverse-color':'uni-dec-color']">
                        {{tem.label}}
                    </text>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
const list = function(){
    return [
        { 
            label: '属地', value: 0, show: false,  
            list:[
                { label: '一师', value: 1 },
                { label: '二师', value: 2 },
                { label: '三师', value: 3 },
                { label: '四师', value: 4 },
                { label: '五师', value: 5 },
            ]
        },
        { 
            label: '企业类型', value: 0, show: false,  
            list:[
                { label: '全部', value: 1 },
                { label: '建筑', value: 2 },
                { label: '施工', value: 3 },
                { label: '其它', value: 4 },
            ]
        },
    ]
}

export default {
    name: 'uni-select',
    props:{
        bgColor:{
            type: String,
            default () {
                return '#F6F7F8'
            }
        },
        selectData:{
            type: Array,
            default () {
                return list()
            }
        }
    },

    data(){
        return {}
    },

    methods: {
        click(index){
            this.selectData.map((v,i)=>{
                v.show = false
            })
            this.selectData[index].show = true
        },

        // 选择事件
        select(index,tem){
            this.selectData[index].label = tem.label
            this.selectData[index].value = tem.value
            this.selectData[index].show = false
            this.$emit( 'select',{ type:this.selectData[index].type, value:tem.value } )
        },

        // 关闭
        close(){
            this.selectData.map((v,i)=>{
                v.show = false
            })
        },
    }
}
</script>

<style scoped lang="scss">
    .uni-select{
        height: 74rpx;
        .item{
            height: 100%;
            &:after{
                content: '';
                width: 1rpx;
                height: 42rpx;
                background: rgb(247, 247, 247);
                position: absolute;
                top: 16rpx;
                right: 0;
            }
            &:first-child{
                border-radius: 12rpx 0 0 0;
            }
            &:last-child{
                border-radius: 0 12rpx 0 0;
                &:after{
                    display: none;
                }
            }
            position: relative;
            .list{
                width: 100%;
                height: 300rpx;
                background: $uni-text-color-inverse;
                position: absolute;
                top: 74rpx;
                left: 0;
                z-index: 10001;
                box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.07);
                .tem{
                    min-height: 74rpx;
                    padding: 10rpx 0;
                }
            }
        }
        .active-item{
            background: #21A5F3 !important;
            &:after{
                display: none;
            }
        }
    }
</style>